<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>交易记录管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        body {
            padding: 20px;
            background-color: #f8f9fa;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-top: 20px;
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
        .modal-header .close {
            font-size: 1.5rem;
            font-weight: bold;
            cursor: pointer;
        }
        .pagination {
            display: flex;
            justify-content: center;
            list-style: none;
            padding: 0;
            margin-top: 10px;
        }
        .pagination li {
            cursor: pointer;
            padding: 5px 10px;
            margin-right: 5px;
            font-size: 1rem;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
        }
        .pagination li.active {
            font-weight: bold;
            background-color: #e9ecef;
            border-color: #adb5bd;
        }
    </style>
</head>
<body>
<div class="container">
    <h2>交易记录管理</h2>
    <button class="btn btn-primary mb-3" onclick="showAddModal()">新增交易记录</button>
    <button class="btn btn-primary mb-3" onclick="window.location.href='/oil-manage/'">返回首页</button> <!-- 添加返回首页按钮 -->
    <table class="table">
        <thead>
        <tr>
            <th>ID</th>
            <th>卡号</th>
            <th>交易时间</th>
            <th>交易金额</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="transactionBody"></tbody>
    </table>
    <nav aria-label="Page navigation">
        <ul class="pagination"></ul>
    </nav>
</div>
<div id="addModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <span class="close" onclick="closeAddModal()">&times;</span>
            <h2>新增交易记录</h2>
        </div>
        <div class="modal-body">
            <form id="addForm" onsubmit="submitNewTransaction(event)">
                <div class="mb-3">
                    <label for="cardNo" class="form-label">卡号</label>
                    <input type="text" class="form-control" id="cardNo" required>
                </div>
                <div class="mb-3">
                    <label for="tradingTime" class="form-label">交易时间</label>
                    <input type="datetime-local" class="form-control" id="tradingTime" required>
                </div>
                <div class="mb-3">
                    <label for="totalPrice" class="form-label">交易金额</label>
                    <input type="number" class="form-control" id="totalPrice" required>
                </div>
                <button type="submit" class="btn btn-primary">提交</button>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    fetchTransactions(1); // 默认加载第一页
});

function fetchTransactions(pageNum) {
    axios.get(`/oil-manage/getTransactionRecords`, {
        params: {
            pageNum: pageNum,
            pageSize: 10
        }
    }).then(response => {
        if (response.data && response.data.success) {
            const data = response.data.data;
            if (data.list && data.pages) {
                renderTable(data.list);
                setupPagination(data.pages, pageNum);
            } else {
                console.error('数据格式不正确:', data);
                alert('数据格式不正确，请检查服务器响应！');
            }
        } else {
            console.error('响应格式错误:', response);
            alert('响应格式错误，请检查服务器响应！');
        }
    }).catch(error => {
        console.error('获取交易记录失败', error);
        alert('获取交易记录失败: ' + error.message);
    });
}

function renderTable(records) {
    const tbody = document.getElementById('transactionBody');
    tbody.innerHTML = '';
    records.forEach(record => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td>${record.id}</td>
            <td>${record.cardNo}</td>
            <td>${record.tradingTime}</td>
            <td>${record.totalPrice}</td>
            <td>${record.checkStatus === 1 ? '未校验' : '已校验'}</td>
            <td>
                <button class="btn btn-sm btn-warning" onclick="editStatus(${record.id},2)">修改状态</button>
                <button class="btn btn-sm btn-danger" onclick="deleteTransaction(${record.id})">删除</button>
            </td>`;
        tbody.appendChild(tr);
    });
}

function setupPagination(totalPages, currentPage) {
    const paginationUl = document.querySelector('.pagination');
    paginationUl.innerHTML = '';

    let liPrev = generatePageItem(currentPage > 1 ? currentPage - 1 : 1, '上一页');
    paginationUl.appendChild(liPrev);

    for (let i = 1; i <= totalPages; i++) {
        let li = generatePageItem(i, i.toString());
        if (i === currentPage) {
            li.classList.add('active');
        }
        paginationUl.appendChild(li);
    }

    let liNext = generatePageItem(currentPage < totalPages ? currentPage + 1 : totalPages, '下一页');
    paginationUl.appendChild(liNext);
}

function generatePageItem(pageNumber, text) {
    let li = document.createElement('li');
    li.className = 'page-item';
    let a = document.createElement('a');
    a.className = 'page-link';
    a.href = '#';
    a.textContent = text;
    a.onclick = (e) => {
        e.preventDefault();
        fetchTransactions(pageNumber);
    };
    li.appendChild(a);
    return li;
}

function showAddModal() {
    document.getElementById('addModal').style.display = 'block';
}

function closeAddModal() {
    document.getElementById('addModal').style.display = 'none';
}

function submitNewTransaction(event) {
    event.preventDefault();
    const cardNo = document.getElementById('cardNo').value;
    const tradingTime = document.getElementById('tradingTime').value;
    const totalPrice = document.getElementById('totalPrice').value;
    axios.post('/oil-manage/insertTransactionRecord', {
        cardNo: cardNo,
        tradingTime: tradingTime,
        totalPrice: parseFloat(totalPrice),
        checkStatus: 1  // 假设新记录默认为未校验状态
    }).then(response => {
        if (response.data && response.data.success) {
            alert('交易记录添加成功！');
            fetchTransactions(1);  // 刷新交易记录
            closeAddModal();
        } else {
            alert('添加失败，请检查数据和服务器响应！');
        }
    }).catch(error => {
        console.error('添加交易记录失败', error);
        alert('添加失败: ' + error.message);
    });
}
</script>
</body>
</html>